<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">账户列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 白色内容区域 -->
    <div class="page_content">
      <div class="flex">
        <!-- 搜索框 -->
        <div class="input_box">
          <el-input
            v-model="searchParams.query"
            placeholder="搜索关键字"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="searchList"
                ><el-icon><Search /></el-icon
              ></el-button>
            </template>
          </el-input>
        </div>

        <!-- 添加按钮 -->
        <el-button type="primary" @click="addUser">新建用户</el-button>
      </div>
      <!-- 表格 -->
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="mobile" label="电话" />
        <el-table-column prop="role_name" label="角色" />
        <el-table-column prop="mg_state" label="状态">
          <template #default="scope">
            <el-switch
              v-model="scope.row.mg_state"
              @change="switchChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template #default="scope">
            <el-button type="primary" @click="editRow(scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="deleteRow(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        v-model:currentPage="searchParams.pagenum"
        v-model:page-size="searchParams.pagesize"
        :page-sizes="[2, 5, 10, 20]"
        :small="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="searchList"
        @current-change="searchList"
      />
    </div>
    <!-- 新建用户弹窗 -->
    <el-dialog
      v-model="dialogFormVisible"
      title="新建用户"
      width="40%"
      @close="addDialogClosed"
    >
      <el-form
        ref="userForm"
        :model="formData"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="formData.username" placeholder="请输入用户名称" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入用户密码"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm(userForm)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 编辑用户弹窗 -->
    <el-dialog
      v-model="dialogFormEVisible"
      title="编辑用户"
      width="40%"
      @close="addDialogClosed"
    >
      <el-form
        ref="userForm2"
        :model="formData2"
        label-width="100px"
        :rules="rules2"
      >
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData2.email" placeholder="请输入用户邮箱" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="formData2.mobile" placeholder="请输入用户手机号" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormEVisible = false">取消</el-button>
          <el-button type="primary" @click="submitEForm(userForm2)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import {
  userListApi,
  userAddApi,
  userChangeStateApi,
  userChangeInfoApi,
  userDeleteApi,
} from "@/util/request.js";
export default {
  name: "user",
  setup() {
    const data = reactive({
      keyword: "",
      searchParams: {
        query: "", //查询参数
        pagesize: 10, //一页显示的条数
        pagenum: 1, //当前页码
      },
      total: 0,
      userList: [],
      dialogFormVisible: false,
      dialogFormEVisible: false,
      formData: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      formData2: {
        id: "",
        email: "",
        mobile: "",
      },
      // 验证规则
      rules: {
        username: [
          { required: true, message: "此项为必填项！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "此项为必填项！", trigger: "blur" },
        ],
        email: [
          {
            pattern:
              /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "请输入正确的邮箱",
            trigger: ["blur"],
          },
        ],
        mobile: [
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
      rules2: {
        email: [
          {
            pattern:
              /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "请输入正确的邮箱",
            trigger: ["blur"],
          },
        ],
        mobile: [
          {
            pattern:
              /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    });
    const searchList = () => {
      userListApi(data.searchParams).then((res) => {
        if (res.data) {
          //
          console.log("用户数据", res);
          data.userList = res.data.users;
          data.total = res.data.total;
        }
      });
    };
    // 新建用户对话框
    const addUser = () => {
      data.dialogFormVisible = true;
    };
    // 点击取消按钮
    const cancelForm = () => {
      // 隐藏表单
      data.dialogFormVisible = false;
      // 清空表单数据
      data.formData = {
        username: "",
        password: "",
        email: "",
        mobile: "",
      };
      // userForm.resetFields();
    };
    // 点击确认按钮 提交表单数据
    const submitForm = (FormEl) => {
      // 对form表单进行验证
      FormEl.validate((res) => {
        if (!res) {
          return;
        }
        // 表单验证通过
        userAddApi(data.formData).then((res) => {
          if (res.data) {
            // 隐藏表单
            data.dialogFormVisible = false;
            // 清空表单数据
            data.formData = {
              username: "",
              password: "",
              email: "",
              mobile: "",
            };
            // 初始化页面
            searchList();
          }
        });
      });
    };
    // 编辑 提交表单数据
    const submitEForm = (FormEl) => {
      // 对form表单进行验证
      FormEl.validate((res) => {
        if (!res) {
          return;
        }
        // 提交修改
        userChangeInfoApi(data.formData2).then((res) => {
          if (res.data) {
            // 初始化页面
            searchList();
            // 关闭弹窗
            data.dialogFormEVisible = false;
          }
        });
      });
    };
    const userForm = ref();
    const userForm2 = ref();
    // 关闭对话框的回调
    function addDialogClosed() {
      data.formData = {
        username: "",
        password: "",
        email: "",
        mobile: "",
      };
      // userForm.resetFields();
    }
    // 初始化页面
    searchList();
    //状态改变的回调
    const switchChange = (row) => {
      userChangeStateApi(row).then((res) => {
        if (res.data) {
          searchList();
        }
      });
    };
    // 编辑功能
    const editRow = (row) => {
      data.dialogFormEVisible = true;
      data.formData2.email = row.email;
      data.formData2.mobile = row.mobile;
      data.formData2.id = row.id;
    };
    // 删除功能
    const deleteRow = (row) => {
      userDeleteApi(row).then((res) => {
        searchList();
      });
    };
    return {
      ...toRefs(data),
      searchList,
      addUser,
      submitForm,
      submitEForm,
      userForm,
      userForm2,
      cancelForm,
      addDialogClosed,
      switchChange,
      editRow,
      deleteRow,
    };
  },
};
</script>

<style scoped>
.input_box {
  width: 300px;
  margin-right: 10px;
}
</style>